<template>
	<view>
		<!-- 導出模板 -->
		<view id="exportTemplate">
			<uni-title type="h1" align="center"
				:title="quoteInfo.custom_name ? quoteInfo.custom_name: '这是一个公司名称'"></uni-title>
			<view class="group">
				<view class="item">
					<text class="label">联系电话：</text>
					<text class="main">{{quoteInfo.custom_mobile_phone}}</text>
				</view>
				<view class="item" style="width: 180rpx;">
					<text class="label">联系人：</text>
					<text class="main">{{quoteInfo.custom_contact}}</text>
				</view>
			</view>

			<view class="item" style="margin-top: 28rpx;">
				<text class="label">公司名称：</text>
				<text class="main">{{companyInfo.company_name}}</text>
			</view>
			<view class="group" style="margin-bottom: 16rpx;">
				<view class="item">
					<text class="label">手机：</text>
					<text class="main">{{companyInfo.mobile_phone}}</text>
				</view>
				<view class="item" style="width: 180rpx;">
					<text class="label">报价日期：</text>
					<text class="main">{{dateFormat(quoteInfo.updated_at)}}</text>
				</view>
			</view>
			<uni-table border>
				<uni-tr>
					<uni-th align="center" width="20rpx">序号</uni-th>
					<uni-th align="center">箱型</uni-th>
					<uni-th align="center">规格</uni-th>
					<uni-th align="center">材料</uni-th>
					<uni-th align="center">单价</uni-th>
					<uni-th align="center">备注</uni-th>
				</uni-tr>
				<!-- 占位 -->
				<!-- 	<uni-tr>
					<uni-td align="center">1020</uni-td>
					<uni-td align="center">Jeson</uni-td>
					<uni-td align="center">北京市海淀区</uni-td>
					<uni-td align="center">这是一个公司签名</uni-td>
					<uni-td align="center">这是一个公司签名</uni-td>
					<uni-td align="center">这是一个公司签名</uni-td>
				</uni-tr> -->
				<uni-tr v-for="(item,index) in quoteInfo.list" :key="item.quotation_id">
					<uni-td align="center">{{index + 1}}</uni-td>
					<uni-td align="center">{{item.boxName}}</uni-td>
					<uni-td align="center">{{item.length}}*{{item.width}}*{{item.height}}（{{unitMap[item.unit] || '厘米'}}）</uni-td>
					<uni-td align="center">{{item.raw}}</uni-td>
					<uni-td align="center">{{item.total_price}}</uni-td>
					<uni-td align="center">{{item.remark}}</uni-td>
				</uni-tr>
			</uni-table>
			<view class="group" style="margin-top: 64rpx;">
				<view class="item">
				</view>
				<view class="item" style="width: 180rpx;">
					<text class="label">客户签名：</text>
					<text class="main"></text>
				</view>
			</view><view class="group" style="margin-top: 64rpx;">
				<view class="item">
				</view>
				<view class="item" style="width: 180rpx;">
					<text class="label">日期：</text>
					<text class="main"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unitMap: {
					1: '毫米',
					2: '厘米',
					3: '英寸',
				},
				quoteInfo: {
					list: []
				},
				companyInfo: {}
			};
		},
		props: {
			/* 默认值 */
			propData: {
				type: Object,
				default () {
					return {
						list: []
					}
				}
			}
		},
		watch: {
			propData: {
				handler(nval, oval) {
					this.quoteInfo = nval;
				},
				deep: true,
				immediate: true
			}
		},
		created() {
			let companyInfo = uni.getStorageSync('companyInfo');
			companyInfo && (this.companyInfo = JSON.parse(companyInfo));
		},
		methods: {
			dateFormat(val) {
				if (!val) return ''
				return new Date(val).toLocaleDateString(
					'zh-cn'
				);
			},
		}
	}
</script>
<style scoped lang="scss">
	// uni-page-body {
	// 	height: 100%;
	// 	background-color: #fff !important;
	// }

	#exportTemplate {
		position: fixed;
		z-index: -9999;
		background-color: #fff;
		padding: 40rpx 20rpx 50rpx;

		.item {
			font-family: Source Han Sans CN, Source Han Sans CN;
			// width: 180rpx;

			.label {
				height: 22rpx;
				font-size: 17rpx;
				font-weight: 400;
				color: #1A1A1A;
				line-height: 44rpx;
				-webkit-background-clip: text;
			}

			.main {
				height: 22rpx;
				font-size: 17rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
				-webkit-background-clip: text;
			}
		}

		.group {
			display: flex;
			justify-content: space-between;
		}
	}
</style>